<template>
  <section class="app-container">
    <!--工具条-->
    <el-row>
      <el-col :span="6" class="inputform">
        <div>证书编号:</div>
        <el-input
          placeholder="证书编号"
          v-model="queryparam.certificate_no"
        ></el-input>
      </el-col>
      <el-col :span="6" class="inputform">
        <div>申请商公司:</div>
        <el-input
          placeholder="申请商公司"
          v-model="queryparam.applycompany_name"
        ></el-input>
      </el-col>
      <el-col :span="6" class="inputform">
        <div>制造商公司:</div>
        <el-input
          placeholder="制造商公司"
          v-model="queryparam.makecompany_name"
        ></el-input>
      </el-col>
      <el-col :span="6" class="inputform">
        <div>产品名称:</div>
        <el-input
          placeholder="产品名称"
          v-model="queryparam.product_name"
        ></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="6" class="inputform">
        <div>产品型号:</div>
        <el-input
          placeholder="产品型号"
          v-model="queryparam.product_no"
        ></el-input>
      </el-col>
      <el-col :span="18" class="inputform">
        <el-button type="primary" @click="$refs.gridlist.loadData(1)"
          >查询</el-button
        >
        <el-button type="primary" @click="add()">新增</el-button></el-col
      ></el-row
    >
    <gridlist
      :queryparam="queryparam"
      apicode="dictionary.queryCertificate"
      ref="gridlist"
      :scopedSlots="scopedSlots"
    >
      <div slot="trademark" slot-scope="record">
        <img :src="record.row.trademark" width="150px" height="80px" />
      </div>
      <template slot="operation" slot-scope="record">
        <a
          class="margin-a"
          href="javascript:;"
          style="margin-right: 5px;"
          @click="edit(record.row)"
          >修改</a
        >
        <a
          class="margin-a"
          href="javascript:;"
          style="margin-right: 5px;"
          @click="deletefun(record.row)"
          >删除</a
        >
      </template>
    </gridlist>
    <zhlDialog
      title="证书信息维护"
      ref="certificateinfodialog"
      width="960px"
      class="my-dialog"
    >
      <certificateinfo
        :fid="selectid"
        @savedata="SaveAs"
        @close="$refs.certificateinfodialog.visible = false"
      ></certificateinfo>
    </zhlDialog>
  </section>
</template>
<script>
import { apiComm } from '@/api/index'
import gridlist from '@/components/gridlist/index.vue'
import certificateinfo from './certificateinfo.vue'
export default {
  data() {
    return {
      queryparam: {
        certificate_no: '',
        applycompany_name: '',
        makecompany_name: '',
        product_name: '',
        product_no: ''
      },
      selectid: {},
      scopedSlots: ['trademark']
    }
  },
  components: { gridlist, certificateinfo },
  methods: {
    edit(rowitem) {
      this.selectid = rowitem.fid
      this.$refs.certificateinfodialog.visible = true
    },
    add() {
      this.selectid = undefined
      this.$refs.certificateinfodialog.visible = true
    },
    deletefun(rowitem) {
      apiComm('dictionary.deleteCertificate', {
        fid: rowitem.fid
      }).then(res => {
        console.log(res)
        this.$refs.gridlist.loadData(1)
      })
    },
    SaveAs() {
      this.$refs.gridlist.loadData(1)
      this.$refs.certificateinfodialog.visible = false
    }
  },
  mounted() {}
}
</script>
<style scoped>
.inputform div:first-child {
  width: 80px;
  display: inline-block;
  height: 40px;
  margin-top: 10px;
  margin-left: 10px;
}
.inputform .el-input {
  width: calc(100% - 100px);
  float: right;
}
.inputform .el-select {
  width: calc(100% - 100px);
  float: right;
}
.inputform button {
  margin-left: 5px;
  margin-right: 5x;
}
</style>
